@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
body {
  font-family: "Roboto", sans-serif; }

#header_topbar {
  background-color: #474747;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  padding: 0.3rem 6%; }
  #header_topbar #header_topbar_left p {
    font-weight: 600;
    margin: 0; }
  #header_topbar #header_topbar_right {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem; }
    #header_topbar #header_topbar_right #header_topbar_open {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem;
      transition: 0.3s; }
      #header_topbar #header_topbar_right #header_topbar_open p {
        font-weight: 400;
        margin: 0; }
      #header_topbar #header_topbar_right #header_topbar_open:hover {
        transition: 0.3s;
        opacity: 75%; }
    #header_topbar #header_topbar_right #header_topbar_mail {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem;
      transition: 0.3s; }
      #header_topbar #header_topbar_right #header_topbar_mail a {
        text-decoration: none;
        font-weight: 400;
        color: #ffffff; }
      #header_topbar #header_topbar_right #header_topbar_mail:hover {
        transition: 0.3s;
        opacity: 75%; }
      #header_topbar #header_topbar_right #header_topbar_mail:hover a {
        transition: 0.3s;
        opacity: 75%; }
  @media only screen and (max-width: 1200px) {
    #header_topbar {
      display: none; } }

#main_header .bg-dark {
  background-color: #336799 !important; }

#main_header .navbar {
  padding: 1.2rem 5.2%; }

#main_header .navbar-expand-lg .navbar-collapse {
  flex-basis: 0; }

#main_header .nav-link {
  color: #ffffff;
  font-weight: 600; }

#main_header .dropdown {
  position: static !important; }

#main_header .dropdown-menu {
  border: none;
  --bs-dropdown-padding-y: 0rem !important;
  border-radius: 0;
  margin-top: 0px !important;
  width: 100% !important; }

#main_header #dropdown_menu_content {
  display: flex;
  flex-wrap: wrap;
  background-color: rgba(33, 80, 125, 0.9);
 }
  #main_header #dropdown_menu_content li {
    width: 25%; }
    
    @media only screen and (max-width: 1199px){
          #main_header #dropdown_menu_content li {
            width: 100%; }
    }
    
.dropdown-toggle[aria-expanded="true"]:after {
transform: rotate(180deg); 
}
/*for animation*/ 
.dropdown-toggle:after { 
transition: 0.3s; 
}
    
  #main_header #dropdown_menu_content .dropdown_menu_items {
    display: flex;
    flex-wrap: wrap;
    width: 100%; }
  #main_header #dropdown_menu_content .dropdown-item {
    padding: 1rem;
    font-weight: 600;
    color: #ffffff !important; }
    #main_header #dropdown_menu_content .dropdown-item:hover {
      background: none !important; }

@media only screen and (max-width: 600px) {
  #main_header .navbar {
    padding: 1.2rem 2%; } }

@media only screen and (max-width: 295px) {
  #main_header .navbar-brand {
    width: 70%; }
    #main_header .navbar-brand img {
      width: 70%; } }

#header_mainbar {
  background-color: #336799;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center; }
  #header_mainbar #header_mainbar_img {
    width: 22%;
    padding: 1.5rem 6%; }
  #header_mainbar #header_mainbar_links {
    padding: 0 6%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem; }
    #header_mainbar #header_mainbar_links a {
      text-decoration: none;
      color: #ffffff; }
    #header_mainbar #header_mainbar_links #header_mainbar_btn {
      background-color: #ffffff;
      color: #231F20;
      font-weight: 700;
      padding: 0.5rem 1rem;
      border-radius: 4px;
      transition: 0.3s;}
      
    #header_mainbar #header_mainbar_links #header_mainbar_btn:hover {
        opacity: 85%;
        transition: 0.3s;
        }
  @media only screen and (max-width: 1240px) {
    #header_mainbar #header_mainbar_img {
      width: 30%; } }
  @media only screen and (max-width: 810px) {
    #header_mainbar #header_mainbar_img {
      width: 40%; } }
  @media only screen and (max-width: 498px) {
    #header_mainbar {
      justify-content: center;
      gap: 1rem; }
      #header_mainbar #header_mainbar_img {
        width: 50%;
        padding: 1.5rem 0; }
      #header_mainbar #header_mainbar_links {
        width: 50%;
        padding: 0 0 1.5rem 0; } }
  @media only screen and (max-width: 477px) {
    #header_mainbar #header_mainbar_links {
      justify-content: center; } }

#rozcestnik_welcome {
  height: 50rem;
  padding-top: 4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem; }
  
  
  
 #rozcestnik_heading{
        text-align: center;
        color: white;
        padding-top: 4rem;
    }
  
  #rozcestnik_welcome a {
    text-decoration: none;
    color: #ffffff; }
    #rozcestnik_welcome a .rozcestnik_card {
      height: 20rem;
      min-width: 20rem;
      display: grid;
      justify-content: center;
      align-content: center;
      width: 20rem;
      text-align: center;
      color: #ffffff;
      background-color: rgba(51, 103, 153, 1);
      transition: 0.3s; }
      #rozcestnik_welcome a .rozcestnik_card img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 1.5rem; }
      #rozcestnik_welcome a .rozcestnik_card p {
        margin: 0;
        padding: 0; }
      #rozcestnik_welcome a .rozcestnik_card h2 {
        font-weight: 700; }
      #rozcestnik_welcome a .rozcestnik_card:hover {
        transition: 0.3s;
        background-color: rgba(51, 103, 153, 0.8); }
    #rozcestnik_welcome a p {
      margin: 0;
      padding: 0;
      padding-top: 1rem;
      text-align: center;
      width: 20rem; }
  @media only screen and (max-width: 1754px) {
    #rozcestnik_welcome a .rozcestnik_card {
      width: 17rem; } }
  @media only screen and (max-width: 1509px) {
    #rozcestnik_welcome a .rozcestnik_card {
      width: 14rem; } }
  @media only screen and (max-width: 1274px) {
    #rozcestnik_welcome {
      gap: 1rem; } }
  @media only screen and (max-width: 1200px) {
    #rozcestnik_welcome {
      height: 70rem;
      padding-top: 4rem;
      align-items: flex-start; }
      #rozcestnik_welcome a .rozcestnik_card {
        width: 20rem; } }
  @media only screen and (max-width: 1008px) {
    #rozcestnik_welcome {
      height: 120rem; }
      #rozcestnik_welcome a .rozcestnik_card {
        width: 25rem; } }
  @media only screen and (max-width: 815px) {
    #rozcestnik_welcome {
      height: 170rem; }
      #rozcestnik_welcome a .rozcestnik_card {
        width: 25rem; } }
  @media only screen and (max-width: 419px) {
    #rozcestnik_welcome a .rozcestnik_card {
      width: 20rem; } }
  @media only screen and (max-width: 347px) {
    #rozcestnik_welcome a .rozcestnik_card {
      width: 15rem; } }

#reference_welcome {
  background: linear-gradient(164deg, rgba(35, 31, 32, 0.8) 64%, rgba(35, 31, 32, 0.8) 100%), url("/assets/images/reference/reference_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-align: center;
  height: 30rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  color: #ffffff; }
  #reference_welcome h1 {
    font-weight: 700;
    text-transform: uppercase; }

#reference_zahranici {
  padding: 4rem 0; }
  #reference_zahranici #reference_zahranici_heading h3 {
    color: #336799;
    font-weight: 600;
    padding-left: 4%; }
  #reference_zahranici #reference_zahranici_content {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem; }
    #reference_zahranici #reference_zahranici_content .reference_zahranici_card {
      width: 30%;
      text-align: center;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      color: #ffffff;
      height: 20rem;
      display: grid;
      justify-content: center;
      align-content: center;
      transition: 0.3s; }
      #reference_zahranici #reference_zahranici_content .reference_zahranici_card h4 {
        font-weight: 700;
        z-index: 10;
        padding: 0 0.5rem; }
      #reference_zahranici #reference_zahranici_content .reference_zahranici_card p {
        opacity: 80%;
        padding: 0;
        margin: 0;
        z-index: 10; }
      #reference_zahranici #reference_zahranici_content .reference_zahranici_card .overlay {
        position: absolute;
        width: 30%;
        height: 20rem;
        background-color: #231F20;
        opacity: 50%;
        transition: opacity 0.3s; }
      #reference_zahranici #reference_zahranici_content .reference_zahranici_card:hover .overlay {
        transition: 0.3s;
        opacity: 35%; }
  @media only screen and (max-width: 955px) {
    #reference_zahranici #reference_zahranici_content .reference_zahranici_card {
      width: 40%; }
      #reference_zahranici #reference_zahranici_content .reference_zahranici_card .overlay {
        width: 40%; } }
  @media only screen and (max-width: 670px) {
    #reference_zahranici #reference_zahranici_content .reference_zahranici_card {
      width: 50%; }
      #reference_zahranici #reference_zahranici_content .reference_zahranici_card .overlay {
        width: 50%; } }
  @media only screen and (max-width: 600px) {
    #reference_zahranici #reference_zahranici_heading {
      text-align: center; }
      #reference_zahranici #reference_zahranici_heading h3 {
        padding: 0; }
    #reference_zahranici #reference_zahranici_content .reference_zahranici_card {
      width: 50%;
      height: 12rem; }
      #reference_zahranici #reference_zahranici_content .reference_zahranici_card .overlay {
        width: 50%;
        height: 12rem; } }
  @media only screen and (max-width: 428px) {
    #reference_zahranici #reference_zahranici_content .reference_zahranici_card {
      width: 90%;
      height: 15rem; }
      #reference_zahranici #reference_zahranici_content .reference_zahranici_card .overlay {
        width: 90%;
        height: 15rem; } }
  @media only screen and (max-width: 324px) {
    #reference_zahranici #reference_zahranici_content .reference_zahranici_card {
      width: 90%;
      height: 15rem; }
      #reference_zahranici #reference_zahranici_content .reference_zahranici_card .overlay {
        width: 90%;
        height: 15rem; } }

#reference_cesko {
  padding-top: 2rem;
  padding-bottom: 4rem; }
  #reference_cesko #reference_cesko_heading h3 {
    color: #336799;
    font-weight: 600;
    padding-left: 4%; }
  #reference_cesko #reference_cesko_heading h3 {
    color: #231F20; }
  #reference_cesko #reference_cesko_content {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem; }
    #reference_cesko #reference_cesko_content .reference_cesko_card {
      width: 30%;
      text-align: center;
      background-image: url("/assets/images/reference/reference_bg.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      color: #ffffff;
      height: 20rem;
      display: grid;
      justify-content: center;
      align-content: center;
      transition: 0.3s; }
      #reference_cesko #reference_cesko_content .reference_cesko_card h4 {
        font-weight: 700;
        z-index: 10;
        padding: 0 0.5rem; }
      #reference_cesko #reference_cesko_content .reference_cesko_card p {
        opacity: 80%;
        padding: 0;
        margin: 0;
        z-index: 10; }
      #reference_cesko #reference_cesko_content .reference_cesko_card .overlay {
        position: absolute;
        width: 30%;
        height: 20rem;
        background-color: #231F20;
        opacity: 50%;
        transition: opacity 0.3s; }
      #reference_cesko #reference_cesko_content .reference_cesko_card:hover .overlay {
        transition: 0.3s;
        opacity: 35%; }
  @media only screen and (max-width: 955px) {
    #reference_cesko #reference_cesko_content .reference_cesko_card {
      width: 40%; }
      #reference_cesko #reference_cesko_content .reference_cesko_card .overlay {
        width: 40%; } }
  @media only screen and (max-width: 670px) {
    #reference_cesko #reference_cesko_content .reference_cesko_card {
      width: 50%; }
      #reference_cesko #reference_cesko_content .reference_cesko_card .overlay {
        width: 50%; } }
  @media only screen and (max-width: 600px) {
    #reference_cesko #reference_cesko_heading {
      text-align: center; }
      #reference_cesko #reference_cesko_heading h3 {
        padding: 0; }
    #reference_cesko #reference_cesko_content .reference_cesko_card {
      width: 50%;
      height: 12rem; }
      #reference_cesko #reference_cesko_content .reference_cesko_card .overlay {
        width: 50%;
        height: 12rem; } }
  @media only screen and (max-width: 428px) {
    #reference_cesko #reference_cesko_content .reference_cesko_card {
      width: 70%;
      height: 15rem; }
      #reference_cesko #reference_cesko_content .reference_cesko_card .overlay {
        width: 70%;
        height: 15rem; } }
  @media only screen and (max-width: 324px) {
    #reference_cesko #reference_cesko_content .reference_cesko_card {
      width: 90%;
      height: 15rem; }
      #reference_cesko #reference_cesko_content .reference_cesko_card .overlay {
        width: 90%;
        height: 15rem; } }

#home_welcome{
padding-bottom: 3%;    
}

.home_carousel {
    position: relative;
    width: 100%;
}

.home_slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transition: opacity 0.5s; /* Přidáno pro plynulé přechody */
}

.home_slide img {
    width: 100%;
    height: auto;
}

.home_slide_arrow{
    padding-top: 35%;
}

.home_prev,
.home_next {
    opacity: 0;
    position: absolute;
    z-index: 10;
    top: 50%;
    font-size: 24px;
    padding: 0.1rem 0.8rem 0.3rem 0.8rem;
    color: white;
    cursor: pointer;
    text-decoration: none;
    background-color: black;
    transition: 0.3s;
}

.home_carousel:hover .home_prev{
    opacity: 1;
    transition: 0.3s;
}

.home_carousel:hover .home_next{
    opacity: 1;
    transition: 0.3s;
}

.home_prev:hover,
.home_next:hover {
    transition: 0.3s;
    color:#336799;
}

.home_prev:hover i,
.home_next:hover i {
    color: white;
}

.home_prev {
    left: 2rem;
}

.home_next {
    right: 2rem;
}

.home_slide_mobil{
    display:none;    
}

@media only screen and (max-width: 1200px){
    
    #home_welcome{
        padding-bottom: 60%;    
    }
    
    .home_slide_pc{
        display: none;    
    }    
    
    .home_slide_mobil{
        display: block;    
    }
}

@media only screen and (max-width: 800px) {
    .home_prev {
        left: 2%;
    }
    .home_next {
        right: 2%;
    }
}

@media only screen and (max-width: 730px) {
    .home_prev {
        display: none;
    }
    .home_next {
        display: none;
    }
}

#home_top_machine {
  margin-top: -1rem;
  background-color: #ffffff;
  padding: 3rem 0; }
  #home_top_machine #home_top_machine_heading {
    padding-bottom: 2rem; }
    #home_top_machine #home_top_machine_heading h3 {
      color: #336799;
      font-weight: 600;
      padding-left: 4%; }
  #home_top_machine a {
    text-decoration: none; }
    #home_top_machine a .machine_card {

      text-align: center;
      background-color: #E8E8E8;
      border-bottom: 4px solid #336799;
      background-image: url("/assets/images/home/background_shape_divider_card.png");
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: 100%; }
      #home_top_machine a .machine_card h5 {
        padding-top: 1rem;
        color: #231F20;
        text-transform: uppercase;
        font-weight: 600; }
      #home_top_machine a .machine_card h6 {
        color: #336799;
        font-weight: 600; }

#home_services {
  padding-top: 2rem; }
  #home_services #home_services_heading {
    padding-bottom: 1rem; }
    #home_services #home_services_heading h3 {
      color: #336799;
      font-weight: 600;
      padding-left: 4%; }
  #home_services #home_services_content {
    padding: 4rem 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background-color: #E8E8E8; }
    #home_services #home_services_content .home_services_card {
      width: 20%;
      text-align: center; }
      #home_services #home_services_content .home_services_card img {
        display: block;
        margin-left: auto;
        margin-right: auto; }
      #home_services #home_services_content .home_services_card h4 {
        margin-top: 2rem;
        padding-bottom: 1rem;
        font-weight: 700;
        color: #336799; }
  @media only screen and (max-width: 1480px) {
    #home_services #home_services_content .home_services_card {
      width: 25%; } }
  @media only screen and (max-width: 1200px) {
    #home_services #home_services_heading {
      text-align: center;
      padding-left: 0; }
      #home_services #home_services_heading h3 {
        color: #336799;
        font-weight: 600;
        padding-left: 4%; }
    #home_services #home_services_content {
      gap: 2rem; }
      #home_services #home_services_content .home_services_card {
        width: 40%; } }
  @media only screen and (max-width: 746px) {
    #home_services #home_services_content .home_services_card {
      width: 70%; } }
  @media only screen and (max-width: 466px) {
    #home_services #home_services_content .home_services_card {
      width: 90%; } }

#home_categories {
  padding: 4rem 0; }
  #home_categories #home_categories_heading h3 {
    color: #336799;
    font-weight: 600;
    padding-left: 4%; }
  #home_categories #home_catwegories_list {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 2rem 17%; }
    #home_categories #home_catwegories_list a {
      text-decoration: none;
      color: #231F20; }
      #home_categories #home_catwegories_list a .home_category_card {
        width: 15vw;
        text-align: center; }
        #home_categories #home_catwegories_list a .home_category_card img {
          filter: brightness(60%);
          transition: 0.3s; }
        #home_categories #home_catwegories_list a .home_category_card p {
          transition: 0.3s;
          margin-top: 1rem;
          font-weight: 700; }
        #home_categories #home_catwegories_list a .home_category_card:hover img {
          transition: 0.3s;
          filter: brightness(100%); }
        #home_categories #home_catwegories_list a .home_category_card:hover p {
          transition: 0.3s;
          color: #336799; }
          
          #home_catwegories_list .divelement{
            width: auto !important;
        }
          
    .divelement{
        width: 16%;    
    }
          
  #home_categories .hidden {
    display: none; }
  #home_categories #home_categories_buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; }
    #home_categories #home_categories_buttons #show-more {
      border: none;
      clip-path: circle();
      background-color: #231F20;
      color: #ffffff;
      transition: 0.3s;
      font-size: 1.3rem;
      padding: 0.6rem; }
      #home_categories #home_categories_buttons #show-more:hover {
        transition: 0.3s;
        background-color: #336799; }
        #home_categories #home_categories_buttons #show-more:hover i {
          transform: translateY(1px); }
    #home_categories #home_categories_buttons #show-less {
      border: none;
      clip-path: circle();
      background-color: #231F20;
      color: #ffffff;
      transition: 0.3s;
      font-size: 1.3rem;
      padding: 0.6rem; }
      #home_categories #home_categories_buttons #show-less:hover {
        transition: 0.3s;
        background-color: #336799; }
        #home_categories #home_categories_buttons #show-less:hover i {
          transform: translateY(-1px); }
          
 
          
  @media only screen and (max-width: 1600px) {
    #home_categories #home_catwegories_list {
      padding: 2rem 16%; } }
  @media only screen and (max-width: 1200px) {
      

      
    #home_categories #home_categories_heading {
      text-align: center; }
    #home_categories #home_catwegories_list {
      padding: 2rem 5%; }
      #home_categories #home_catwegories_list a .home_category_card {
        width: 20vw; }
        
            .divelement{
        width: 20vw;    
    }
        }
  @media only screen and (max-width: 959px) {
      
      #home_about #home_about_img{
          display:none;
          }
      
      #home_categories #home_categories_buttons #show-more{
        display:none;      
    }
      
    #home_categories #home_catwegories_list {
      padding: 2rem 17%; }
      #home_categories #home_catwegories_list a .home_category_card {
        width: 30vw; }
        
            .divelement{
        width: 30vw;    
    }
        }
  @media only screen and (max-width: 533px) {
    #home_categories #home_catwegories_list {
      padding: 2rem 5%; }
      #home_categories #home_catwegories_list a .home_category_card {
        width: 90vw; }
        
            .divelement{
        width: 50vw;    
    }
        
        }

#home_about {
  margin-top: -0.4rem;
  background-repeat: no-repeat;
  background-position: top, top center;
  background-size: 100%, cover;
  height: 70vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding-top: 10rem;
  align-items: center;
  color: #ffffff; }
  #home_about #home_about_text {
    width: 50vw; }
    #home_about #home_about_text h4 {
      font-size: 2rem;
      font-weight: 500; }
    #home_about #home_about_text h2 {
      font-weight: 700;
      font-size: 3rem;
      padding-bottom: 1rem; }
    #home_about #home_about_text p {
      color: #cccccc;
      padding-bottom: 4rem; }
    #home_about #home_about_text a {
      text-decoration: none;
      color: #ffffff;
      background-color: #336799;
      padding: 0.5rem 1rem;
      font-weight: 500;
      border: 2px solid #336799;
      border-radius: 4px; }
  #home_about #home_about_img {
    width: 25vw; }
  @media only screen and (max-width: 1160px) {
    #home_about {
      padding-bottom: 4rem;
      padding-top: 6rem; }
      #home_about #home_about_img {
        margin-top: 4rem; }
      #home_about #home_about_text {
        width: 90vw;
        text-align: center; } }
  @media only screen and (max-width: 750px) {
    #home_about #home_about_img {
      width: 40vw; } }
  @media only screen and (max-width: 577px) {
    #home_about {
      gap: 2rem;
      padding-top: 4rem;
      height: auto; }
      #home_about #home_about_text h4 {
        font-size: 1.5rem; }
      #home_about #home_about_text h2 {
        font-size: 2rem; }
      #home_about #home_about_img {
        width: 40vw; } }

#categories {
  padding: 4rem 0; }
  #categories #categories_heading h3 {
    color: #336799;
    font-weight: 600;
    padding-left: 4%; }
  #categories #categories_heading h3 {
    padding-left: 0;
    text-align: center;
    color: #231F20; }
  #categories #categories_list {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 2rem 17%; }
    
    #categories #categories_list a {
      text-decoration: none;
      color: #231F20; }
      #categories #categories_list a .category_card {
        width: 100%;
        text-align: center; }
        #categories #categories_list a .category_card img {
          filter: brightness(60%);
              max-width: 12rem;
          transition: 0.3s; }
        #categories #categories_list a .category_card p {
          transition: 0.3s;
          margin-top: 1rem;
          font-weight: 700; }
        #categories #categories_list a .category_card:hover img {
          transition: 0.3s;
          filter: brightness(100%); }
        #categories #categories_list a .category_card:hover p {
          transition: 0.3s;
          color: #336799; }
  @media only screen and (max-width: 1600px) {
    #categories #categories_list {
      padding: 2rem 16%; } }
  @media only screen and (max-width: 1200px) {
    #categories #categories_list {
      padding: 2rem 5%; }
      #categories #categories_list a .category_card {
        width: 20vw; } }
  @media only screen and (max-width: 960px) {
    #categories #categories_list {
      padding: 2rem 17%; }
      #categories #categories_list a .category_card {
        width: 30vw; } }
  @media only screen and (max-width: 533px) {
    #categories #categories_list {
      padding: 2rem 25%; }
      #categories #categories_list a .category_card {
        width: 50vw; } }
        
        

#category_back_btn {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: 4rem; }
  #category_back_btn a {
    text-decoration: none;
    color: #ffffff;
    background-color: #474747;
    padding: 0.5rem 1rem;
    font-weight: 500;
    border: 2px solid #474747;
    border-radius: 4px;
    padding: 0.5rem 3.5rem;
    transition: 0.3s;}
    
  #category_back_btn a:hover {
    background-color: #336799;
    border: 2px solid #336799;
    transition: 0.3s;
  }

#product_list_welcome {
  background: linear-gradient(164deg, rgba(35, 31, 32, 0.8) 64%, rgba(35, 31, 32, 0.8) 100%), url("/assets/images/product_list/product_list_bg.png");
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  text-align: center;
  padding: 10rem 0; }
  #product_list_welcome h1 {
    font-weight: 700;
    color: #ffffff; }

#product_list_list {
  padding: 4rem 15%;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  text-align: center; }
  #product_list_list a {
    text-decoration: none;
    color: #231F20;
    transition: 0.3s; }
    #product_list_list a .product_list_card {
      width: 10vw; }
      #product_list_list a .product_list_card img {
        width: 70% !important;
        background-color: #E8E8E8; }
      #product_list_list a .product_list_card p {
        margin-top: 0.3rem;
        font-weight: 700; }
    #product_list_list a:hover {
      transition: 0.3s;
      color: #336799; }
  @media only screen and (max-width: 1600px) {
    #product_list_list {
      padding: 4rem 14%; }
      #product_list_list a .product_list_card {
        width: 12rem; } }
  @media only screen and (max-width: 1512px) {
    #product_list_list {
      padding: 4rem 12%; }
      #product_list_list a .product_list_card {
        width: 12rem; } }
  @media only screen and (max-width: 1432px) {
    #product_list_list {
      padding: 4rem 10%; }
      #product_list_list a .product_list_card {
        width: 12rem; } }
  @media only screen and (max-width: 1360px) {
    #product_list_list {
      padding: 4rem 8%; }
      #product_list_list a .product_list_card {
        width: 12rem; } }
  @media only screen and (max-width: 1296px) {
    #product_list_list {
      padding: 4rem 6%; }
      #product_list_list a .product_list_card {
        width: 12rem; } }
  @media only screen and (max-width: 1237px) {
    #product_list_list {
      padding: 4rem 6%; }
      #product_list_list a .product_list_card {
        width: 20vw; } }
  @media only screen and (max-width: 1200px) {
    #product_list_list {
      padding: 4rem 15%; }
      #product_list_list a .product_list_card {
        width: 20vw; } }
  @media only screen and (max-width: 735px) {
    #product_list_list {
      padding: 4rem 15%; }
      #product_list_list a .product_list_card {
        width: 30vw; } }
  @media only screen and (max-width: 533px) {
    #product_list_list {
      padding: 4rem 24%; }
      #product_list_list a .product_list_card {
        width: 50vw; } }

#product_list_pagination {
  padding: 4rem 0; }
  #product_list_pagination ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem; }
    #product_list_pagination ul a {
      text-decoration: none;
      color: #ffffff;
      font-weight: 700;
      transition: 0.3s;
      background-color: #908e8f;
      padding: 0.7rem 1.1rem; }
      #product_list_pagination ul a:hover {
        transition: 0.3s;
        background-color: #336799; }

.category_cesta {
  padding: 0.2rem 5%;
  background-color: #21507D;
  display: flex;
  flex-wrap: wrap;
  align-items:center;
  color: #ffffff; }
  .category_cesta a {
    padding: 0 0.5rem;
    font-size: 0.8rem;
    color: #ffffff;
    text-decoration: none; }
    
    .cesta_aktivni{
        font-weight: 700;    
    }
    
    .cesta_neaktivni{
        opacity: 80%; 
        transition: 0.3s;
    }
    
    .cesta_neaktivni:hover{
        opacity: 60%;
        transition: 0.3s;
    }

@media only screen and (max-width: 600px){
        .category_cesta{
            padding: 0.2rem 3%;    
        }
}


#product_detail {
  padding: 4rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }
  #product_detail #product_detail_left {
    width: 40%; }
    #product_detail #product_detail_left h1 {
      font-size: 1.8rem; }
    #product_detail #product_detail_left p {
      margin: 0;
      padding: 0;
      color: #474747;
      font-weight: 700; }
    #product_detail #product_detail_left h1 {
      font-weight: 700; }
  #product_detail #product_detail_right {
    width: 20%; }
    
    .product_detail_right_dole{
        width: 60% !important;
    }
    
    #product_detail #product_detail_right p {
      font-weight: 700;
      color: #336799; }
    #product_detail #product_detail_right #product_detail_right_specification {
      background-color: #E8E8E8;
      padding: 1rem;
      border-radius: 5px; 
}
      #product_detail #product_detail_right #product_detail_right_specification ul {
        width: 100%;
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem; }
        
         #product_detail #product_detail_right #product_detail_right_specification ul li{
             width: 40%; 
             }
             
                       #product_detail #product_detail_right #product_detail_right_specification ul li:first-child {
            font-weight: 700; }
        
    #product_detail #product_detail_right #produkt_detail_dalsi_rozmery {
      margin-top: 2rem; }
    #product_detail #product_detail_right .accordion {
      margin-bottom: 20px; }
    #product_detail #product_detail_right .accordion-header {
      background-color: #E8E8E8;
      padding: 10px 2rem;
      color: #231F20;
      cursor: pointer;
      transition: background-color 0.3s ease; }
    #product_detail #product_detail_right .accordion-content {
      max-height: 0;
      overflow: hidden;
      background-color: #E8E8E8;
      transition: max-height 0.3s ease; }
    #product_detail #product_detail_right .accordion-item {
      border: none !important; }
  @media only screen and (max-width: 1777px) {
    #product_detail #product_detail_right {
      width: 25%; } }
  @media only screen and (max-width: 1422px) {
    #product_detail #product_detail_right {
      width: 30%; } }
  @media only screen and (max-width: 1310px) {
    #product_detail {
      gap: 4rem; } }
  @media only screen and (max-width: 1185px) {
    #product_detail #product_detail_right {
      width: 35%; } }
  @media only screen and (max-width: 1016px) {
    #product_detail #product_detail_right {
      width: 40%; } }
  @media only screen and (max-width: 889px) {
    #product_detail #product_detail_left {
      width: 90% !important;
      text-align: center; }
      
    .product_detail_right_dole{
        width: 90% !important;
    }
      
    #product_detail #product_detail_right {
      width: 90%; }
      #product_detail #product_detail_right p {
        text-align: center; }
      #product_detail #product_detail_right #product_detail_right_specification {
        justify-content: center; } }
  @media only screen and (max-width: 395px) {
    #product_detail #product_detail_left {
      width: 100%;
      text-align: center; }
    #product_detail #product_detail_right {
      width: 100%; }
      #product_detail #product_detail_right #product_detail_right_specification {
        gap: 1rem; } }

#product_detail_doporucene {
  padding: 4rem 0; }
  #product_detail_doporucene p {
    padding: 0 17%;
    font-weight: 700;
    font-size: 1.2rem; }
  #product_detail_doporucene #product_detail_doporucene_content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem; }
    #product_detail_doporucene #product_detail_doporucene_content a {
      width: 12%;
      text-decoration: none;
      color: #231F20; }
      #product_detail_doporucene #product_detail_doporucene_content a .product_detail_doporucene_card {
        text-align: center; }
        #product_detail_doporucene #product_detail_doporucene_content a .product_detail_doporucene_card img {
          background-color: #E8E8E8; }
        #product_detail_doporucene #product_detail_doporucene_content a .product_detail_doporucene_card h3 {
          margin-top: 0.7rem;
          transition: 0.3s;
          font-size: 1.2rem;
          font-weight: 700;
          text-transform: uppercase; }
        #product_detail_doporucene #product_detail_doporucene_content a .product_detail_doporucene_card:hover h3 {
          transition: 0.3s;
          color: #336799; }
  @media only screen and (max-width: 1195px) {
    #product_detail_doporucene p {
      padding: 0 6%; }
    #product_detail_doporucene #product_detail_doporucene_content a {
      width: 15%; } }
  @media only screen and (max-width: 896px) {
    #product_detail_doporucene p {
      padding: 0 2%; }
    #product_detail_doporucene #product_detail_doporucene_content a {
      width: 25%; } }
  @media only screen and (max-width: 542px) {
    #product_detail_doporucene p {
      text-align: center;
      padding: 0; }
    #product_detail_doporucene #product_detail_doporucene_content a {
      width: 40%; } }
  @media only screen and (max-width: 395px) {
    #product_detail_doporucene #product_detail_doporucene_content a {
      width: 70%; } }

#o_firme_welcome {
  background: linear-gradient(164deg, rgba(35, 31, 32, 0.8) 64%, rgba(35, 31, 32, 0.8) 100%), url("/assets/images/o_firme/o_firme_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-align: center;
  padding: 15rem 0;
  text-transform: uppercase; }
  #o_firme_welcome h1 {
    font-weight: 700;
    color: #ffffff; }

#o_firme_content {
  padding: 4rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4rem; }
  #o_firme_content #o_firme_text {
    width: 40%; }
    #o_firme_content #o_firme_text h2 {
      font-weight: 700;
      font-size: 1.5rem;
      padding-bottom: 1rem; }
  #o_firme_content #o_firme_img {
    width: 40%; }
    #o_firme_content #o_firme_img img {
      display: block;
      margin-left: auto;
      margin-right: auto; }
  @media only screen and (max-width: 1184px) {
    #o_firme_content #o_firme_text {
      width: 90%;
      text-align: center; }
    #o_firme_content #o_firme_img {
      width: 90%; }
      #o_firme_content #o_firme_img img {
        width: 30%; } }
  @media only screen and (max-width: 800px) {
    #o_firme_content #o_firme_img img {
      width: 50%; } }
  @media only screen and (max-width: 480px) {
    #o_firme_content #o_firme_text h2 br {
      display: none; }
    #o_firme_content #o_firme_img img {
      width: 70%; } }
  @media only screen and (max-width: 360px) {
    #o_firme_content #o_firme_img img {
      width: 100%; } }

#o_firme_form {
  padding: 4rem 30%; }
  #o_firme_form .form_text_content {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem; }
    #o_firme_form .form_text_content .form_text {
      width: 47%; }
      #o_firme_form .form_text_content .form_text input {
        width: 100%;
        border: none;
        background-color: #E8E8E8;
        padding: 0.5rem 1rem; }
  #o_firme_form textarea {
    margin-top: 2.7rem;
    width: 97%;
    background-color: #E8E8E8;
    border: none;
    max-height: 15rem;
    min-height: 15rem;
    padding: 0.5rem; }
  #o_firme_form label {
    padding-top: 2rem; }
    #o_firme_form label a {
      color: #336799; }
  #o_firme_form .form_btn {
    margin-top: 2rem; }
    #o_firme_form .form_btn a {
      text-decoration: none;
      color: #ffffff;
      background-color: #336799;
      padding: 0.5rem 1rem;
      font-weight: 500;
      border: 2px solid #336799;
      border-radius: 4px; }
  @media only screen and (max-width: 1420px) {
    #o_firme_form {
      padding: 4rem 25%; } }
  @media only screen and (max-width: 1137px) {
    #o_firme_form {
      padding: 4rem 20%; } }
  @media only screen and (max-width: 964px) {
    #o_firme_form {
      padding: 4rem 15%; } }
  @media only screen and (max-width: 823px) {
    #o_firme_form {
      padding: 4rem 10%; } }
  @media only screen and (max-width: 714px) {
    #o_firme_form {
      padding: 4rem 5%; } }
  @media only screen and (max-width: 445px) {
    #o_firme_form .form_text_content .form_text {
      width: 100%; }
    #o_firme_form textarea {
      width: 100%; } }
      
      #kontakty_welcome {
  text-align: center;
  padding: 15rem 0;
  text-transform: uppercase; }
  #kontakty_welcome h1 {
    font-weight: 700;
    color: #ffffff; }

#kontakty_footer {

  padding-top: 15rem; }
  #kontakty_footer #kontakty_footer_content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    color: #ffffff;
    text-align: center; }
    #kontakty_footer #kontakty_footer_content .kontakty_footer_card {
      width: 30%;
      display: block; }
      #kontakty_footer #kontakty_footer_content .kontakty_footer_card img {
        margin-bottom: 0.5rem; }
      #kontakty_footer #kontakty_footer_content .kontakty_footer_card strong {
        display: block;
        margin: 0;
        padding: 0; }
      #kontakty_footer #kontakty_footer_content .kontakty_footer_card p {
        margin: 0;
        padding: 0; }
      #kontakty_footer #kontakty_footer_content .kontakty_footer_card a {
        text-decoration: none;
        color: #ffffff;
        opacity: 80%; }
    @media only screen and (max-width: 1100px) {
      #kontakty_footer #kontakty_footer_content {
        justify-content: center;
        gap: 2rem; }
        #kontakty_footer #kontakty_footer_content .kontakty_footer_card {
          width: 70%; } }
    @media only screen and (max-width: 630px) {
      #kontakty_footer #kontakty_footer_content .kontakty_footer_card {
        width: 90%; }
        #kontakty_footer #kontakty_footer_content .kontakty_footer_card img {
          width: 40%; } }
  #kontakty_footer #kontakt_footer_info {
    margin-top: 4rem;
    padding-bottom: 1rem;
    text-align: center;
    color: #ffffff; }
    #kontakty_footer #kontakt_footer_info p {
      padding: 0;
      margin: 0; }
    #kontakty_footer #kontakt_footer_info a {
      color: #ffffff; }


#footer_form {
  padding: 4rem 0; }
  #footer_form h2 {
    text-align: center;
    font-weight: 700;
    padding-bottom: 2rem; }
  #footer_form #fotoer_form_content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem; }
    #footer_form #fotoer_form_content #footer_form_form {
      width: 30%; }
      #footer_form #fotoer_form_content #footer_form_form form {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem; }
        #footer_form #fotoer_form_content #footer_form_form form input {
          width: 100%;
          border: none;
          background-color: #E8E8E8;
          padding: 0.5rem;
          border-radius: 4px; }
        #footer_form #fotoer_form_content #footer_form_form form textarea {
          width: 100%;
          border: none;
          background-color: #E8E8E8;
          padding: 0.5rem;
          border-radius: 4px;
          max-height: 14.5rem;
          min-height: 14.5rem; }
        #footer_form #fotoer_form_content #footer_form_form form label input {
          width: 3%; }
        #footer_form #fotoer_form_content #footer_form_form form label a {
          color: #336799; }
        #footer_form #fotoer_form_content #footer_form_form form #footer_form_btn a {
          text-decoration: none;
          color: #ffffff;
          background-color: #474747;
          padding: 0.5rem 1rem;
          font-weight: 500;
          border: 2px solid #474747;
          border-radius: 4px;
          transition: 0.3s;
          }
          
        #footer_form #fotoer_form_content #footer_form_form form #footer_form_btn a:hover {
            background-color: #336799;
            border: 2px solid #336799;
            transition: 0.3s;
        }
            
    #footer_form #fotoer_form_content #footer_form_map {
      width: 30%; }
  @media only screen and (max-width: 1467px) {
    #footer_form #fotoer_form_content #footer_form_form {
      width: 40%; }
    #footer_form #fotoer_form_content #footer_form_map {
      width: 40%; } }
  @media only screen and (max-width: 1159px) {
    #footer_form #fotoer_form_content #footer_form_form {
      width: 50%; }
    #footer_form #fotoer_form_content #footer_form_map {
      width: 0%; } }
  @media only screen and (max-width: 890px) {
    #footer_form #fotoer_form_content #footer_form_form {
      width: 70%; }
    #footer_form #fotoer_form_content #footer_form_map {
      width: 70%; } }
  @media only screen and (max-width: 600px) {
    #footer_form #fotoer_form_content #footer_form_form {
      width: 90%; }
    #footer_form #fotoer_form_content #footer_form_map {
      width: 90%; } }

#footer_contact {
  padding: 4rem 0;
  background-color: #474747;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 4rem; }
  #footer_contact .footer_contact_card {
    text-align: center;
    color: #ffffff; }
    #footer_contact .footer_contact_card img {
      display: block;
      margin-left: auto;
      margin-right: auto; }
    #footer_contact .footer_contact_card h2 {
      margin-top: 1rem;
      font-weight: 700;
      font-size: 1.5rem; }
    #footer_contact .footer_contact_card a {
      text-decoration: none;
      color: #ffffff;
      opacity: 80%; }
    #footer_contact .footer_contact_card p {
      margin: 0;
      padding: 0;
      opacity: 80%; }
  @media only screen and (max-width: 560px) {
    #footer_contact {
      justify-content: center;
      gap: 2rem; } }
  @media only screen and (max-width: 470px) {
    #footer_contact .footer_contact_card {
      width: 70%; }
      #footer_contact .footer_contact_card img {
        width: 30% !important; } }
  @media only screen and (max-width: 470px) {
      #footer_contact .footer_contact_card img {
        width: 40% !important; } }

#footer_copy {
  background-color: #336799;
  padding: 0.5rem 0;
  text-align: center; }
  #footer_copy p {
    color: #ffffff;
    margin: 0; }
    #footer_copy p a {
      text-decoration: none;
      color: #ffffff;
      font-weight: 700; }
      
      .pswp__zoom-wrap{
        max-width: none;
        width: auto !important;
        height: 80vh !important;
        position: absolute;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
    
    .pswp img{
                max-width: none;
        width: auto !important;
        height: 80vh !important;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) !important;
    }
        

#kontakt_form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }
  #kontakt_form #kontakt_form_content {
    width: 50%; }
    #kontakt_form #kontakt_form_content .progress-bar {
      width: 100%;
      height: 10px;
      background-color: #ddd;
      margin-bottom: 20px;
      border-radius: 4px; }
    #kontakt_form #kontakt_form_content .progress {
      height: 100%;
      background-color: #336799;
      border-radius: 4px;
      width: 50%;
      transition: width 0.3s ease-in-out; }
    #kontakt_form #kontakt_form_content form {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem; }
      #kontakt_form #kontakt_form_content form .kontakt_form_card {
        width: 48%; }
        #kontakt_form #kontakt_form_content form .kontakt_form_card input {
          width: 100%;
          border: none;
          background-color: #f4f4f5;
          border-radius: 4px;
          padding: 0.5rem; }
    #kontakt_form #kontakt_form_content .kontakt_form_btn {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding: 2rem 0; }
      #kontakt_form #kontakt_form_content .kontakt_form_btn button {
        border: none;
        background-color: #283237;
        padding: 0.5rem 1rem;
        color: #ffffff;
        transition: 0.3s; }
        #kontakt_form #kontakt_form_content .kontakt_form_btn button:hover {
          transition: 0.3s;
          background-color: #336799; }
    #kontakt_form #kontakt_form_content .form-step {
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s; }
      #kontakt_form #kontakt_form_content .form-step h2 {
        font-size: 1.2rem;
        font-weight: 700;
        padding-bottom: 1rem; }
      #kontakt_form #kontakt_form_content .form-step.active {
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
        position: relative;
        left: 0;
        top: 0;
        transform: translate(0); }
      #kontakt_form #kontakt_form_content .form-step:not(.active) {
        position: absolute;
        left: -9999px;
        top: -9999px;
        transform: translate(-9999px, -9999px); }
    #kontakt_form #kontakt_form_content #kontakt_form_step_dva {
      width: 100%; }
      #kontakt_form #kontakt_form_content #kontakt_form_step_dva textarea {
        width: 100% !important;
        border: none;
        background-color: #f4f4f5;
        border-radius: 4px;
        padding: 1rem;
        max-height: 18rem;
        min-height: 18rem; }
    #kontakt_form #kontakt_form_content #kontakt_form_step_dva_btn {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 1rem;
      padding-bottom: 2rem; }
      #kontakt_form #kontakt_form_content #kontakt_form_step_dva_btn button {
        border: none;
        background-color: #283237;
        padding: 0.5rem 1rem;
        color: #ffffff;
        transition: 0.3s; }
        #kontakt_form #kontakt_form_content #kontakt_form_step_dva_btn button:hover {
          transition: 0.3s;
          background-color: #336799; }
  @media only screen and (max-width: 1599px) {
    #kontakt_form #kontakt_form_content {
      width: 60%; } }
  @media only screen and (max-width: 1333px) {
    #kontakt_form #kontakt_form_content {
      width: 70%; } }
  @media only screen and (max-width: 1143px) {
    #kontakt_form #kontakt_form_content {
      width: 80%; } }
  @media only screen and (max-width: 1143px) {
    #kontakt_form #kontakt_form_content {
      width: 90%; } }
  @media only screen and (max-width: 889px) {
    #kontakt_form #kontakt_form_content {
      text-align: center; }
      #kontakt_form #kontakt_form_content form {
        justify-content: center; }
        #kontakt_form #kontakt_form_content form .kontakt_form_card {
          width: 40%; } }
  @media only screen and (max-width: 503px) {
    #kontakt_form #kontakt_form_content {
      text-align: center; }
      #kontakt_form #kontakt_form_content form {
        justify-content: center; }
        #kontakt_form #kontakt_form_content form .kontakt_form_card {
          width: 100%; } }